<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="../css/购物车.css"/>
		<title>购物车</title>
		<style type="text/css">
			#section{width: 100%;background: white;padding: 20px;overflow: hidden;}
			#section h3{    
				font-size: 16px;
			    font-weight: normal;
			    background: url(../img/shop/vivo-head-ico.png) no-repeat;
			    background-position: -220px 5px;
			    padding-left: 35px;
			    line-height: 2;}
			#section table,tr,thead,tbody{display: block;}
			#section table{border: 1px solid #EEEEEE;width: 100%;display: block;color:#333333;overflow: hidden;}  
		    #section table thead{
		    	height:35px;background: #f0f0f0;width: 100%;display: block;
		    }
		    table thead tr{line-height:35px;display: block;height: 100%;}
		    table input{display: inline-block;margin-top: 10px;}
		    table th{height: 100%;display: inline-block;}	
		    table input{
		    	display:inline-block;		    	
    			text-align: center;
		    }
		    table thead div{display: inline-block;text-align: center;line-height: 35px;}
		    table tbody tr{height: 130px;background: #fffdeb;border-collapse: collapse;border-bottom: 1px dotted #ddd;}
    		table tr th div{height: 100%;}
    		table tr th:nth-of-type(1) div{width: 35px;}
    		table tr th:nth-of-type(2) div{width: 470px;padding-left: 20px;}
    		table tr th:nth-of-type(3) div{width: 110px;}
    		table tr th:nth-of-type(4) div{width: 140px;}
    		table tr th:nth-of-type(5) div{width: 80px;}
    		table tr th:nth-of-type(6) div{width: 80px;}
    		table tr img{width: 100px;height: 100px;float: left;margin-top: 10px;border: 1px solid #DDDDDD;}
    		table tr a{display: inline-block;float: left;height: 100%;}
    		table tr a h4{margin: 20px;color: black;}
    		table tbody tr th:nth-of-type(4) div{padding-top: 50px;padding-left: 25px;}
    		table tr th:nth-of-type(4) div span{border: 1px solid #DDDDDD;float:left;display: inline-block;width: 30px;height: 30px;font-size: 14px;}
    		table tbody tr th:nth-of-type(3) div{line-height: 130px;}
    		table tbody tr th:nth-of-type(5) div{line-height: 130px;}
    		table tbody tr th:nth-of-type(6) div{padding-top:55px;padding-left: 25px;}
    		.foot{height: 50px;background:#fafafa;margin-top: 20px;}
    		.foot .left{float: left;}
    		.foot .left .check{display: inline-block}
    		.foot .left .check input{margin:20px 10px}
    		.foot .left a:nth-of-type(1){margin:0 20px ;color: black;cursor: pointer;}
    		.foot .left a:nth-of-type(2){color: black;cursor: pointer;}
    		.foot .right{float: right;}
    		.foot .right div{float: left;}
    		.foot .right div p{font-size: 12px;line-height: 25px;}
    		.foot .right div .need-num{font-size: 14px;font-weight: 700;line-height: 25px;cursor: pointer;}
    		.foot .right span{color: #ed145b;font-size: 18px;font-weight: 700;line-height: 50px;}
    		.foot .right button{display:inline-block;border:0;width: 145px;height: 50px;background: -webkit-linear-gradient(top,#fa417d,#db085a);color: white;font-size: 18px;border-radius: 5px;margin-left: 20px;}
    		.x{cursor: pointer;}
		</style>
	</head>
	<body>
		<!--左边-->
		<div id="left">
			<ul>
				<li><a href="main.html"> 首  页 </a></li>
				<li class="li2">
					<a href="#">品牌系列</a>
					<div class="nav2" style="overflow: hidden; display: block;">
                        <ol>
                        	<li></li>
                        	<li><a>维您</a></li>
                        	<li><a href="商品展示.html">LA CELLER</a></li>
                        	<li><a>秘密花园</a></li>
                        	<li><a>SONOKO</a></li>
                        </ol>
                    </div>
				</li>
				<li><a href="#">美容护肤</a></li>
				<li><a href="#">健康养生</a></li>
				<li><a href="#">家居日用</a></li>
				<li><a href="#">积分换购</a></li>
				<li><a href="#" style="line-height: 23px;">VIP<br />会员专区</a></li>
				<li><a href="#" style="line-height: 23px;">关于<br />麦考林</a></li>
				<li><a href="#">企业荣誉</a></li>
			</ul>
		</div>
		
		<!--右边-->
		<div id="right">
			<ul>
				<li><a href=""><img src="../img/right1.png"></a></li>
				<li class="li2">
					<a href=""><img src="../img/right2.png"></a>
					<div class="nav2"><img src="../img/right3.png"></div>											
				</li>
				<li><a href=""><img src="../img/right4.jpg"></a></li>
				<li class="scroll"><img src="../img/shop/rightSider_04.png"></li>
			</ul>
		</div>
				
		<div id="mainContent">
			<!--main-top-->
			<div class="com-header clearfix">
	            <h1 class="c1 fl"><a href="/"><img src="../img/logo.png" alt="麦考林"></a></h1>
	            <div class="c2 fr ">
	             <a href="javascript:void(0)" role="button" class="search-btn" style=""></a>
	             <span class="user_info_ajax">
	 				| <a href="login.html">登录</a>
	                | <a href="register.html">注册</a>                 
	                | <a href="javascript:void(0)">我的账户</a>
	                | <a href="javascript:void(0)" class="headerCar">
	                    <em></em>
	                    <i class="num">0</i>
	                </a>
	                <span><img src="../img/tel-call.png" alt="400-110-1508"></span></span>
	            </div>
	        </div>
	        
	        
	        <div id="section">
	        	<h3 class="com-head">购物车</h3>
	        	<table border="0" cellspacing="0" cellpadding="">
	        		<thead >
	        			<tr>
	        				<th><div><input type="checkbox" class="all"></div></th>
	        				<th><div>商品名称</div></th>
	        				<th><div>价格</div></th>
	        				<th><div>数量</div></th>
	        				<th><div>小计（元）</div></th>
	        				<th><div>操作</div></th>
	        			</tr>
	        		</thead>
	        		<tbody>
	        			
	        		</tbody>
	        	</table>
	        	
	        	<div class="foot">
	        		<div class="left">
		        		<div class="check"><input type="checkbox" class="all"/>全选</div>
	        			<a href="main.html">继续购物 </a>
	        			<a class="removeAll">清空选中商品</a>
	        		</div>
	        		<div class="right">
		        		<div >
	        				<p> 共  <span class="need-num">6</span>件商品    商品应付总额 (不包含运费) ：</p>
	        				<p>(满99元包邮，不含EMS及港澳台)</p>
	        			</div>
	        			<span class="price">￥0</span>
	        			<button >立即结算</button>
	        		</div>
        			
	        	</div>
	        </div>
		</div>
		
		
		<footer>			
				<ul id="foot-top">
					<li>
						<a>	
							<em></em>
							<span id="">100%正品保证</span>															
						</a>
					</li>
					<li>
						<a>
							<em style="background-position: 0 -106px"></em>
							<span id="">专业在线客服</span>															
						</a>
					</li>
					<li>
						<a>
							<em  style="background-position: 0 -212px"></em>
							<span id="">满99元包邮</span>															
						</a>
					</li>
				</ul>
				<div class="fr">
		            <dl>
		                <dt>新手指南</dt>               
		                <dd><a href="#" target="_blank" title="新会员注册">新会员注册</a></dd>
		                <dd><a href="#" target="_blank" title="购物演示">购物演示</a></dd>
		                <dd><a href="#" target="_blank" title="常见问题">常见问题</a></dd>
		            </dl>
		            <dl>
		                <dt>付款方式</dt>
		                <dd><a href="#" target="_blank" title="银行卡支付">银行卡支付</a></dd>
		                <dd><a href="#" target="_blank" title="支付宝支付">支付宝支付</a></dd>
		                <dd><a href="#" target="_blank" title="余额支付">余额支付</a></dd>
		            </dl>
		            <dl>
		                <dt>售后服务</dt>
		                <dd><a href="#" target="_blank" title="退换货政策">退换货政策</a></dd>
		                <dd><a href="#" target="_blank" title="退换货流程">退换货流程</a></dd>
		                <dd><a href="#" target="_blank" title="退款流程">退款流程</a></dd>
		                <dd><a href="#" target="_blank" title="发票说明">发票说明</a></dd>
		            </dl>
		            <dl>
		                <dt>特色服务</dt>
		                <dd><a href="#" target="_blank" title="贵宾专区">贵宾专区</a></dd>
		                <!--<dd><a href="/book/" target="_blank" title="电子刊物">电子刊物</a></dd>-->
		                <dd><a style="cursor:pointer;"  title="在线客服">在线客服</a></dd>
		            </dl>
		             <dl>
		                <dt>麦考林生活家</dt>
		                <dd><img src="../img/dingyue.jpg" alt="麦考林生活家" width="100" height="100"></dd>
		            </dl>
		             <dl class="last">
		                <dt>麦考林服务号</dt>
		                <dd style="margin-left:8px"><img src="../img/fuwu.jpg" alt="麦考林服务号" width="100" height="100"></dd>
		            </dl>
        		</div>
				<div class="foot-b">
					<ul class="clearfix">
	                    <li class="first"><a href="#" rel="nofollow">  关于麦考林</a> </li>
	                    <li><a href="#" target="_blank" rel="nofollow">INVESTOR RELATIONS</a></li>
	                    <li><a href="#" rel="nofollow">联系我们 </a></li>	                    
	                    <li><a href="#" rel="nofollow">服务中心</a></li>
	                    <li class="last"><a href="#" rel="nofollow">加入我们 </a></li>                    
                	</ul>
                	<p><a href="#" target="_blank"><img src="../img/newicon.png" alt="上海工商" width="26" height="28"></a> 沪ICP备05003606号Copyright©2011-2015 MecoxLane Inc. All Rights Reserved</p>
				</div>							
		</footer>
		<div class="foot-bottom">
			<a target="_blank" href="#"><img src="../img/xfwqNew.jpg"></a>　　
			<a target="_blank" href="#"><img src="../img/evaluate.jpg"></a>						　　
			<a target="_blank" href="#"><img src="../img/beian.png">沪公网安备 31010402000234号</a>											
		</div>
	</body>
</html>
<script src="../js/tronke.Cookie.js"></script>
<script src="../js/Ajax.js"></script>
<script src="../js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">	
	//给滚动条加动画
	$(document).scroll(function(){		
		if($(this).scrollTop()>50){
			$(".scroll").slideDown("1s");
			$(".scroll").on("click",function(){
				$(document).scrollTop(0);
			})
		}else{
			$(".scroll").slideUp("1s");
		}
	})
	
	//左边小图标的显示与隐藏
		$("#left .li2").on("mouseenter",function(){		
			$(".nav2").css({width:74,height:"100%",opacity:1})								
		})
		$("#left .li2").on("mouseleave",function(){		
			$(".nav2").css({width:0,height:0,opacity:0})								
		})
	
	//右边小图标的显示与隐藏
		$("#right").find(".li2").find("a").on("mouseenter",function(){
			$(this).siblings(".nav2").css({"left":"-230px",opacity:1,display:"block"})
		})
		 $("#right").find(".li2").find("a").on("mouseleave",function(){
			$(this).siblings(".nav2").css({"left":"-300px",opacity:0,display:"none"})
		})

	
	var num=0;
	var need=0;
	var price=0;
	var jsonStr=[];
	
	ajax({
		type:"get",
		url:"../json/购物车.json",
		async:true,
		success:function(res){
			
			var data=res;
			console.log(data);
			var tbody=document.getElementsByTagName("tbody")[0];		
			
			for(var i=0;i<35;i++){
				jsonStr.push(getCookieValueByKey("No."+i)); //根据ID获取本地一条cookie的记录为J，再	
				if(jsonStr[i]){
					if(JSON.parse(jsonStr[i]).num<=0){
//						removeCookie("No."+JSON.parse(jsonStr[i]).id);
					}
					
					num+=JSON.parse(jsonStr[i]).num; //商品数目
					$(".num").html(num); //商品总数目									
					var newtr=document.createElement("tr");
					newtr.index=i;
					newtr.data=data[i];  //newtr 是一个DOM对象，对象可以动态扩展属性，所以扩展了一个data属性					
					var th1=document.createElement("th");
					th1.innerHTML="<div><input type='checkbox' checked='checked'></div>";
					var th2=document.createElement("th");
					th2.innerHTML="<div><img src='"+JSON.parse(jsonStr[i]).src+"'><a><h4>"+JSON.parse(jsonStr[i]).name+"</h4><p>"+JSON.parse(jsonStr[i]).mazhi+"</p></a></div>";
					var th3=document.createElement("th");
					th3.innerHTML="<div>"+JSON.parse(jsonStr[i]).price+"</div>";
					var th4=document.createElement("th");
					th4.innerHTML="<div><span class='down' onclick=eleDown(this)>-</span><span class='nn'>"+JSON.parse(jsonStr[i]).num+"</span><span class='up' onclick=eleUp(this)>+</span></div>";
					var th5=document.createElement("th");
					th5.innerHTML="<div class='money'>"+(JSON.parse(jsonStr[i]).num)*(JSON.parse(jsonStr[i]).price)+"</div>";
					var th6=document.createElement("th");
					th6.innerHTML="<div><a class='x' onclick=eleRemove(this)>X删除</a></div>";
									
					newtr.appendChild(th1)
					newtr.appendChild(th2)
					newtr.appendChild(th3)
					newtr.appendChild(th4)
					newtr.appendChild(th5)
					newtr.appendChild(th6)
					tbody.appendChild(newtr);	
					var spanm=newtr.children[3].children[0].children[1];
//					console.log(spanm.innerHTML)
					if(spanm.innerHTML==0){
						$(spanm).parents("tr").remove();
					}
				}												
			}
			
							
			var timer1=setInterval(function(){
				var inputs=$("tbody").find("input");
				need=0;
				price=0;
				for(var i=0;i<inputs.length;i++){					
					if($(inputs[i]).prop('checked')){						
						price+=Number($(inputs[i]).parents("tr").find(".money").html());
						var index=$(inputs[i]).parents("tr")[0].index;
//						console.log(JSON.parse(getCookieValueByKey("No."+1)).num)
						need+=JSON.parse(getCookieValueByKey("No."+index)).num;
					}
				}
				$(".foot").find(".price").html(price); //商品总价格
				$(".foot").find(".need-num").html(need); //需要买的商品数目
			},400);
			
			
			//清空选中商品
			$(".removeAll").on("click",function(){
				var inputs=$("tbody").find("input");	
				for(var i=0;i<inputs.length;i++){										
					if($(inputs[i]).prop('checked')){						
						var tr=inputs[i].parentNode.parentNode.parentNode;
						console.log($(tr));
						$(tr).remove();
						var index=tr.index;	
						removeCookie("No."+JSON.parse(jsonStr[index]).id);
					}
				}
			})
			
		}
	});	
	
	
	var date = new Date();
	date.setDate(date.getDate() + 7);	
	//减少商品是数目
	function eleDown(ele){
		$(ele).next().html(Number($(ele).next().html())-1);	
		var tmpCount=$(ele).next().text()-0;
		var index=$(ele).parents("tr")[0].index;
		var data=JSON.parse(jsonStr[index]);		
//		data.num=JSON.parse(jsonStr[index]).num-1;
		data.num=tmpCount		
	    setCookie("No." +data.id,JSON.stringify(data), date);//保存到cookie中
		if(data.num<=0){			
			$(ele).parents("tr").remove();
			removeCookie("No."+data.id)
		}
		var count=0;
		$(".nn").each(function(index,ele){
		 count+=($(ele).text()-0)	
		})		
		$(".num").text(count);
		var pri=$(ele).parent().parent().prev().text()-0;		
		var nnn=$(ele).next().text()-0;
		var zong=$(ele).parent().parent().next().children();
		zong.text(pri*nnn);
		
	}
	//增加商品数目
	function eleUp(ele){
		$(ele).prev().html(Number($(ele).prev().html())+1);				
		var tmpCount=$(ele).prev().text()-0;
		var index=$(ele).parents("tr")[0].index;
		var data=JSON.parse(jsonStr[index]);
		data.num=tmpCount						
	    setCookie("No." +data.id,JSON.stringify(data), date);//保存到cookie中

		var count=0;
		$(".nn").each(function(index,ele){
		 count+=($(ele).text()-0)	
		})		
		$(".num").text(count);
		var pri=$(ele).parent().parent().prev().text()-0;		
		var nnn=$(ele).prev().text()-0;
		var zong=$(ele).parent().parent().next().children();
		zong.text(pri*nnn);
	}
	//删除该商品			
	function eleRemove (ele){		
		var index=$(ele).parents("tr")[0].index;		
		$(ele).parents("tr").remove();
		removeCookie("No."+JSON.parse(jsonStr[index]).id);		
	}
	
	
	$(".all").on("click",function(){
		console.log($(this)[0].checked)
		$("table").find("input").prop('checked',$(this)[0].checked);
	})
	
	
	
	
</script>
